#!/bin/bash

# 颜色定义
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
CYAN='\033[0;36m'
NC='\033[0m' # No Color

echo -e "${BLUE}===========================================${NC}"
echo -e "${BLUE}      APIViewer 前端启动脚本 (Linux/Mac)${NC}"
echo -e "${BLUE}===========================================${NC}"

# 设置默认值
DEFAULT_HOST="localhost"
DEFAULT_PORT="3000"
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
FRONTEND_DIR="$SCRIPT_DIR/frontend"

HOST="$DEFAULT_HOST"
PORT="$DEFAULT_PORT"
BACKEND_HOST=""
BACKEND_PORT=""
CLEANUP_MODE=false
REINSTALL_MODE=false
PRODUCTION_MODE=false

# 检查是否在正确的目录
if [ ! -d "$FRONTEND_DIR" ]; then
    echo -e "${RED}❌ 错误: 未找到 frontend 目录${NC}"
    echo -e "${YELLOW}请确保在项目根目录运行此脚本${NC}"
    exit 1
fi

# 显示帮助信息
show_help() {
    echo "用法: $0 [选项]"
    echo "选项:"
    echo "  --host, -h HOST          设置前端主机地址 (默认: localhost)"
    echo "  --port, -p PORT          设置前端端口号 (默认: 3000)"
    echo "  --backend-host HOST      设置后端主机地址 (默认: localhost)"
    echo "  --backend-port PORT      设置后端端口号 (默认: 8000)"
    echo "  --cleanup                清理node_modules和缓存"
    echo "  --reinstall              重新安装依赖"
    echo "  --production             生产模式构建"
    echo "  --help                   显示此帮助信息"
    echo ""
    echo "示例:"
    echo "  $0                                    # 使用默认设置"
    echo "  $0 --host 0.0.0.0                    # 前端监听所有网络接口"
    echo "  $0 --port 8080                       # 前端使用端口8080"
    echo "  $0 --cleanup                         # 清理并启动"
    echo "  $0 --production                      # 生产模式构建"
    echo "  $0 --backend-host 192.168.1.100      # 连接到指定后端主机"
    echo "  $0 --backend-port 9000               # 连接到后端端口9000"
    echo "  $0 8080                              # 简化写法，只指定前端端口"
    echo "  $0 192.168.1.100                     # 简化写法，只指定前端主机"
}

# 验证端口号
validate_port() {
    local port=$1
    if ! [[ "$port" =~ ^[0-9]+$ ]]; then
        echo -e "${RED}❌ 错误: 端口号必须是数字${NC}"
        exit 1
    fi
    
    if [ "$port" -lt 1 ] || [ "$port" -gt 65535 ]; then
        echo -e "${RED}❌ 错误: 端口号必须在 1-65535 范围内${NC}"
        exit 1
    fi
}

# 检查端口是否被占用
check_port() {
    local port=$1
    if command -v lsof >/dev/null 2>&1; then
        if lsof -Pi :$port -sTCP:LISTEN -t >/dev/null 2>&1; then
            echo -e "${YELLOW}⚠️  警告: 端口 $port 可能正在使用中${NC}"
            echo -e "${YELLOW}如果启动失败，请尝试使用其他端口${NC}"
            echo ""
        fi
    elif command -v netstat >/dev/null 2>&1; then
        if netstat -ln 2>/dev/null | grep -q ":$port "; then
            echo -e "${YELLOW}⚠️  警告: 端口 $port 可能正在使用中${NC}"
            echo -e "${YELLOW}如果启动失败，请尝试使用其他端口${NC}"
            echo ""
        fi
    fi
}

# 解析命令行参数
while [[ $# -gt 0 ]]; do
    case $1 in
        --host|-h)
            HOST="$2"
            shift 2
            ;;
        --port|-p)
            PORT="$2"
            shift 2
            ;;
        --backend-host)
            BACKEND_HOST="$2"
            shift 2
            ;;
        --backend-port)
            BACKEND_PORT="$2"
            shift 2
            ;;
        --cleanup)
            CLEANUP_MODE=true
            shift
            ;;
        --reinstall)
            REINSTALL_MODE=true
            shift
            ;;
        --production)
            PRODUCTION_MODE=true
            shift
            ;;
        --help)
            show_help
            exit 0
            ;;
        [0-9]*)
            # 如果是数字，当作前端端口处理
            PORT="$1"
            shift
            ;;
        *.*)
            # 如果包含点，当作前端主机处理
            HOST="$1"
            shift
            ;;
        *)
            echo -e "${RED}❌ 未知参数: $1${NC}"
            show_help
            exit 1
            ;;
    esac
done

# 验证端口号
validate_port "$PORT"

# 切换到frontend目录
cd "$FRONTEND_DIR" || {
    echo -e "${RED}❌ 错误: 无法切换到 frontend 目录${NC}"
    exit 1
}

# 检查package.json是否存在
if [ ! -f "package.json" ]; then
    echo -e "${RED}❌ 错误: 未找到 package.json 文件${NC}"
    echo -e "${YELLOW}请确保在正确的项目目录中${NC}"
    exit 1
fi

echo -e "${BLUE}📍 启动参数:${NC}"
echo -e "   目录: ${GREEN}$(pwd)${NC}"
echo -e "   主机: ${GREEN}$HOST${NC}"
echo -e "   端口: ${GREEN}$PORT${NC}"
if [ "$PRODUCTION_MODE" = true ]; then
    echo -e "   模式: ${CYAN}🏗️  生产构建${NC}"
else
    echo -e "   模式: ${CYAN}🛠️  开发模式${NC}"
    echo -e "   前端地址: ${GREEN}http://$HOST:$PORT${NC}"
fi
echo -e "${BLUE}==========================================${NC}"

# 检查端口是否被占用
check_port "$PORT"

# 检查Node.js是否安装
if ! command -v node &> /dev/null; then
    echo -e "${RED}❌ 错误: 未找到 Node.js${NC}"
    echo -e "${YELLOW}请先安装 Node.js: https://nodejs.org/${NC}"
    exit 1
fi

echo -e "${GREEN}✅ Node.js 版本: $(node --version)${NC}"

# 检查npm是否安装
if ! command -v npm &> /dev/null; then
    echo -e "${RED}❌ 错误: 未找到 npm${NC}"
    exit 1
fi

echo -e "${GREEN}✅ npm 版本: $(npm --version)${NC}"

# 清理模式
if [ "$CLEANUP_MODE" = true ]; then
    echo -e "${YELLOW}🧹 正在清理项目...${NC}"
    [ -d "node_modules" ] && rm -rf node_modules
    [ -d "dist" ] && rm -rf dist
    [ -d ".webpack" ] && rm -rf .webpack
    npm cache clean --force >/dev/null 2>&1 || true
    echo -e "${GREEN}✅ 清理完成${NC}"
    echo ""
fi

# 重新安装模式
if [ "$REINSTALL_MODE" = true ]; then
    echo -e "${YELLOW}🔄 重新安装依赖...${NC}"
    [ -d "node_modules" ] && rm -rf node_modules
    [ -f "package-lock.json" ] && rm -f package-lock.json
fi

# 检查依赖是否安装
if [ ! -d "node_modules" ]; then
    echo -e "${YELLOW}⚠️  未找到 node_modules 目录，正在安装依赖...${NC}"
    npm install
    if [ $? -ne 0 ]; then
        echo -e "${RED}❌ 依赖安装失败${NC}"
        echo -e "${YELLOW}请检查网络连接和npm配置${NC}"
        exit 1
    fi
    echo -e "${GREEN}✅ 依赖安装完成${NC}"
    echo ""
fi

# 设置API配置
if [ -n "$BACKEND_HOST" ]; then
    export REACT_APP_API_HOST="$BACKEND_HOST"
else
    export REACT_APP_API_HOST="${REACT_APP_API_HOST:-localhost}"
fi

if [ -n "$BACKEND_PORT" ]; then
    export REACT_APP_API_PORT="$BACKEND_PORT"
else
    export REACT_APP_API_PORT="${REACT_APP_API_PORT:-8000}"
fi

echo -e "${CYAN}🔧 API配置:${NC}"
echo -e "   后端主机: ${GREEN}$REACT_APP_API_HOST${NC}"
echo -e "   后端端口: ${GREEN}$REACT_APP_API_PORT${NC}"
echo -e "   API地址: ${GREEN}http://${REACT_APP_API_HOST}:${REACT_APP_API_PORT}/api${NC}"
echo ""

# 生产模式构建
if [ "$PRODUCTION_MODE" = true ]; then
    echo -e "${CYAN}🏗️  开始生产构建...${NC}"
    npm run build
    if [ $? -ne 0 ]; then
        echo -e "${RED}❌ 生产构建失败${NC}"
        exit 1
    fi
    echo -e "${GREEN}✅ 生产构建完成${NC}"
    echo -e "${BLUE}📁 构建文件位于: $(pwd)/dist${NC}"
    exit 0
fi

echo -e "${GREEN}🚀 启动前端开发服务器...${NC}"
echo -e "${YELLOW}🛑 按 Ctrl+C 停止服务器${NC}"
echo ""

# 启动webpack开发服务器
HOST="$HOST" PORT="$PORT" npx webpack serve --mode development --host "$HOST" --port "$PORT" --open

# 检查启动是否成功
if [ $? -ne 0 ]; then
    echo ""
    echo -e "${RED}❌ 前端服务器启动失败${NC}"
    echo -e "${CYAN}💡 可能的解决方案:${NC}"
    echo -e "   ${YELLOW}1. 检查端口 $PORT 是否被占用${NC}"
    echo -e "   ${YELLOW}2. 尝试使用其他端口: $0 --port 3001${NC}"
    echo -e "   ${YELLOW}3. 清理项目: $0 --cleanup${NC}"
    echo -e "   ${YELLOW}4. 重新安装依赖: $0 --reinstall${NC}"
    exit 1
fi

echo ""
echo -e "${BLUE}前端服务器已关闭${NC}" 